<template>
  <view>
    <view class="state-box">
      <view class="headline">
        <view style="display:flex;justify-content:space-around;">
          <view>
            <view>冯明杰</view>
            <view class="information">
              这个人懒得很，啥都不留！
            </view>
            <!-- <image src="../../static/logo.png" style="width:130rpx;height:130rpx" /> -->
          </view>
          <image src="../../static/logo.png" style="width:130rpx;height:130rpx" />
        </view>
      </view>

    </view>



    <!-- <view class="state-box box"> -->

    <!-- <u--form labelPosition="left" ref="uForm">

        <u-form-item label="账号:" labelWidth="200px" borderBottom ref="item1">
          <u--input disabledColor="#ffffff" placeholder="蔡明瑞" border="none"></u--input>
          <u-icon slot="right" name="../../../static/images/index/扫码.png"></u-icon>
        </u-form-item>

        <u-form-item label="手机号码：" labelWidth="200px" borderBottom>
          <u--input disabledColor="#ffffff" placeholder="1122334435" border="none"></u--input>
        </u-form-item>

        <u-form-item label="所在部门：" labelWidth="200px" borderBottom>
          <u--input disabledColor="#ffffff" placeholder="生产部门" border="none"></u--input>
        </u-form-item>


        <u-form-item label="组织信息：" labelWidth="200px">
          <u--input disabledColor="#ffffff" placeholder="安徽xxxxx有限公司" border="none"></u--input>
        </u-form-item>

      </u--form> -->

    <!-- </view> -->

    <view class="box">
      <view class="info">
        <view class="juli">
        <view class="information1 ">
          账 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
        </view>
        
          <view class="info2">
           蔡明瑞
          </view>
        </view>
      </view>
      <view class="info">
        <view class="juli">
        <view class="information1">
          手机号码：
        </view>
        <view class="info2">
          13094583561
        </view>        </view>
      </view>
      <view class="info">
        <view class="juli">
        <view class="information1">
          所在部门：
        </view>
        <view class="info2">
         生产部
        </view></view>
      </view>
      <view class="info">
        <view class="juli" style="border: none;">
        <view class="information1">
          组织信息：
        </view>
        <view class="info2">
         安徽xxxxx公司
        </view>
      </view></view>
    </view>



    <view class="state-box box">

      <u--form labelPosition="left" ref="uForm">
<view style="border-bottom:0.5px solid lightgrey;width:97%">      <u-form-item label="修改密码" labelWidth="200px"  ref="item1" @click="tz">
          <u--input disabled disabledColor="#ffffff" border="none"></u--input>
          <u-icon slot="right" name="arrow-right" color="#d4c5c5"></u-icon>
        </u-form-item></view>
<view style="width:97%;">
        <u-form-item label="关于我们" labelWidth="200px" ref="item1">
          <u--input disabled disabledColor="#ffffff" border="none"></u--input>
          <u-icon slot="right" name="arrow-right"  color="#d4c5c5"></u-icon>
        </u-form-item></view>
      </u--form>
    </view>
    <!-- <view class="butt">
     
      <view class="verification verification1" @click="handleLogout">
        退出登录
      </view>
    </view> -->
    <view style="display: flex;">
      <button @click="handleLogout">退出登录</button>
    </view>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        // 个人信息存放
        name: this.$store.state.user.name,
        version: getApp().globalData.config.appInfo.version
      }
    },
    methods: {
      // 退出登录
      handleLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/pages/index')
          })
        })
      },
      tz() {
        uni.navigateTo({
          url: '../mine/pwd/index'
        })
      },


    }
  }
</script>

<style lang="scss">
  

  .state-box {
    margin: 32rpx 32rpx 32rpx 32rpx;
    padding: 48rpx 0 32rpx 32rpx;
    // height: 450rpx;
    opacity: 1;
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

    .information {
      opacity: 0.3;
      /** 文本1 */
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      margin-top: 30rpx;
    }

    // .headline {
    //   height: 38rpx;
    //   opacity: 1;
    //   /** 文本1 */
    //   font-size: 32rpx;
    //   font-weight: 700;
    //   letter-spacing: 0px;
    //   line-height: 38rpx;
    //   color: rgba(32, 37, 64, 1);
    //   text-align: left;
    //   vertical-align: top;

    // }

  }


  .info {

    margin-bottom: 20rpx;
    .juli{
    
      border-bottom: 0.5px solid #ede5e5;
          /* opacity: 0.06; */
          width: 97%;
          margin-bottom: 14px;
          height: 33px;
          line-height: 26px;
    .information1 {

      float: left;
      opacity: 0.3;
      /** 文本1 */
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(32, 37, 64, 1) !important;
      opacity: 1 !important;
    }
    .info2{
      font-size: 12px;
     color: rgba(32, 37, 64, 1);
     opacity: 0.3;
    }}

  }


  .box1 {
    border-bottom: none
  }


  uni-button {
    width: 650rpx;
    border-radius: 30rpx;
    margin-top: 30rpx;
    color: rgba(255, 255, 255, 1);
    background: linear-gradient(90deg, rgba(255, 176, 158, 1) 0%, rgba(255, 143, 117, 1) 100%);
  }

  ::v-deep .u-icon__icon {
    font-family: uicon-iconfont;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 40rpx;
  }


  .box {
    margin: 32rpx 32rpx 32rpx 32rpx;
    padding: 48rpx 0 32rpx 32rpx;
    // height: 450rpx;
    opacity: 1;
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);


    .info {

      margin-bottom: 20rpx;
      

      .information1 {

        float: left;
        opacity: 0.3;
        /** 文本1 */
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
      }
    }
  }
  ::v-deep .u-form-item {
      display: flex;
      flex-direction: column;
      font-size: 14px;
      color: #303133;
      width: 105%;
  }
</style>